<template>
    <div id="Notice" class="container-fluid">
        <div class="container">
            <div class="row">
                <div id="choiceList" class="col-3">
                    <a-menu
                        class="menu"
                        :default-selected-keys="['0']"
                        mode="inline"
                        theme="dark"
                    >
                        <a-menu-item
                            v-for="mItem in menuList"
                            :key="mItem.key"
                            @click="choiceNoticeItem(mItem.key)"
                        >
                            <a-icon class="menuItemIcon"
                                :type="mItem.iconType"
                                :style="mItem.iconType === 'warning' ? 'color: #fbff48' : 'color: #cccccc'"
                            />
                            <span>{{ mItem.content }}</span>
                        </a-menu-item>
                    </a-menu>
                </div>

                <div id="showNotice" class="col-9">
                    <div
                        v-for="noticeItem in noticeList"
                        :key="noticeItem.key"
                        v-show="noticeItem.key === activeNoticeNum"
                    >
                        <h5>{{ noticeItem.title }}</h5>
                        <hr/>
                        <p v-html="noticeItem.content">{{ noticeItem.content }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Notice",
        props: {
            menuList: {
                type: Array,
                default: function () {
                    return [
                        { key: '0', iconType: 'book', content: '教育活动通知' },
                        { key: '1', iconType: 'warning', content: '紧急停电通知' },
                    ]
                }
            },
            noticeList: {
                type: Array,
                default: function () {
                    return [
                        {
                            key: '0',
                            title: '广泛开展宣传教育，积极营造爱国拥军氛围',
                            content: '<p>各社区要以纪念建国71周年为主题，广泛开展爱国拥军宣传教育活动。</p>' +
                                '<p>一是载体要新。要积极运用墙报、专栏、黑板报、横幅等多种形式；积极运用电子显示屏、社区网站、QQ群等多种载体；通过广播、电视、报刊等多种媒体；爱国主义场所、国防教育基地、部队军史馆等多种设施；主题演讲、知识竞赛、座谈会等多种平台加大宣传力度。</p>' +
                                '<p>二是内容要广。要广泛宣传驻地部队保卫国家安全、维护社会稳定、支援地方建设作出的重大贡献；宣传广大官兵在抢险救灾等活动中所表现出来的无私的奉献精神；宣传身边的优抚对象在地区经济社会发展中继承传统、再立新功的突出成绩，不断增全民国防观念和双拥意识。</p>' +
                                '<p>三是成效要实。要把双拥宣传深入到社区老年人、青少年、外来人口等各类人群；各社区要对社区内的双拥宣传栏、双拥宣传广告牌进行一次维护更新，进一步浓厚双拥创建氛围；有“双拥示范单位”创建任务的社区要借此契机广泛开展群众性的创建活动，增强双拥共建的实效。</p>' +
                                '<p class="text-right">2020-12-24-12:30</p>'
                        },
                        {
                            key: '1',
                            title: '紧急停电通知',
                            content: '<p>告紫晶城小区各业主：</p><p>因经开区2号配电线改造需要，定于本周六下午一点至下午六点小区供电线路断电，工程提前完工将提前送电。</p><p class="text-right">2020-12-23-16:30</p>'
                        },
                    ]
                }
            }
        },
        data() {
            return {
                collapsed: false,
                activeNoticeNum: '0'
            };
        },
        methods: {
            toggleCollapsed() {
                this.collapsed = !this.collapsed;
            },
            choiceNoticeItem(thisKey) {
                // console.log('现在点击的序号为：' + thisKey)
                this.activeNoticeNum = thisKey
            }
        },
    }
</script>

<style scoped>
    #Notice{
        padding-top: 35px;
        padding-bottom: 35px;
        background-color: #eeeeee;
    }

    #Notice .row{
        height: 600px;
        background: #fff;
        padding: 10px 0;
        border-radius: 10px;
        transition: 0.4s;
    }
    #Notice .row:hover{
        box-shadow: 2px 2px 5px #555;
    }

    #choiceList{

    }

    #showNotice{

    }

    .menu{
        height: 100%;
    }

    .menuItemIcon{
        transform: translateY(-2px);
    }
</style>
